<template>
  <div class="search-page-container">
    <!-- 顶部导航 -->
    <header class="nav-header">
      <el-menu :default-active="activeIndex" class="nav-menu" mode="horizontal">
        <router-link to="/HelloWorld">
          <el-menu-item index="HelloWorld">首页</el-menu-item>
        </router-link>
        <router-link to="/counterattack">
          <el-menu-item index="counterattack">电影</el-menu-item>
        </router-link>
        <router-link to="/sweet">
          <el-menu-item index="sweet">电视剧</el-menu-item>
        </router-link>
        <router-link to="/rebirth">
          <el-menu-item index="rebirth">动漫</el-menu-item>
        </router-link>
        <router-link to="/Variety">
          <el-menu-item index="Variety">综艺</el-menu-item>
        </router-link>
        <router-link to="/Entertainment">
          <el-menu-item index="Entertainment">娱乐新闻</el-menu-item>
        </router-link>
        <router-link to="/sheet">
          <el-menu-item index="sheet">片单</el-menu-item>
        </router-link>
      </el-menu>
    </header>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          @keyup.enter="search" 
          placeholder="搜索你感兴趣的内容"
        >
        <button @click="search">
          <img src="../assets/1.png" alt="搜索">
        </button>
      </div>
    </div>

    <!-- 搜索结果区域 -->
    <div class="search-results">
      <div class="results-container">
        <!-- 有搜索结果时 -->
        <template v-if="shortDramas.length > 0">
          <div v-for="(drama, index) in shortDramas" 
               :key="index" 
               class="drama-card" 
               @click="goToDramaDetail(drama.detailsId, drama.name)">
            <div class="drama-content">
              <div class="drama-image-wrapper">
                <img :src="drama.cover" :alt="drama.name" class="drama-image">
              </div>
              <div class="drama-info">
                <h2 class="drama-title">{{ drama.name }}</h2>
                <div class="drama-tags">
                  <el-tag 
                    v-for="(category, idx) in drama.classify.split(' ')" 
                    :key="idx"
                    type="danger"
                    effect="plain"
                    class="drama-tag"
                  >
                    {{ category }}
                  </el-tag>
                </div>
                <p class="drama-desc">{{ truncateString(drama.description, 100) }}</p>
              </div>
            </div>
          </div>
        </template>

        <!-- 无搜索结果时显示推荐内容 -->
        <template v-else>
          <div class="no-results">
            <h2>未找到相关内容</h2>
            <p>为你推荐以下内容：</p>
          </div>
          <div v-for="(drama, index) in videoData" 
               :key="index" 
               class="drama-card" 
               @click="goToDramaDetail(drama.detailsId, drama.name)">
            <div class="drama-content">
              <div class="drama-image-wrapper">
                <img :src="drama.cover" :alt="drama.name" class="drama-image">
              </div>
              <div class="drama-info">
                <h2 class="drama-title">{{ drama.name }}</h2>
                <div class="drama-tags">
                  <el-tag 
                    v-for="(category, idx) in drama.classify.split(' ')" 
                    :key="idx"
                    type="danger"
                    effect="plain"
                    class="drama-tag"
                  >
                    {{ category }}
                  </el-tag>
                </div>
                <p class="drama-desc">{{ truncateString(drama.description, 100) }}</p>
              </div>
            </div>
          </div>
        </template>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref ,onMounted  } from 'vue';
import request from "@/utils/request";
import { useRouter } from 'vue-router'
import { useRoute } from "vue-router";
const route=useRoute();
const searchQuery1=route.params.searchQuery;
const router = useRouter();
const shortDramas = ref([]);
const searchQuery = ref(searchQuery1);
const  videoData=ref([]);
const total=ref(0)
const pageNum= ref(1);
const pageSize= ref(10);
const userName=localStorage.getItem('userName')
//根据搜索框输入的名字来查询短剧
// const search = async () => {
//   try {
//     const res = await request.get('/details/search', { params: { name: searchQuery.value } });
//     shortDramas.value = res.data.data;

//   } catch (error) {
//     console.error('Error searching:', error);
//   }
// }
//根据搜索框输入的名字来查询短剧
const search = async () => {
  try {
    const res = await request.get('/details/page', { params: { pageSize: pageSize.value,pageNum: pageNum.value,name: searchQuery.value } });
    shortDramas.value = res.data.data.records;

    total.value=res.data.data.total
    console.log("================================",res.data.data.records);
  } catch (error) {
    console.error('Error searching:', error);
  }
}

//默认的剧
const  acquiesce = async (classify) =>{
  try {
    const res=await request.get('/details/selectAcquiesce',{params: {classify: classify}})
    videoData.value=res.data.data

  }catch (error){
    console.error('Error searching:', error);
  }
}

// const  loadDetails =async ()=>{
//   try {
//     const  res=await request.get('/details/finAllName',{params: {name: searchQuery.value}})
//     details.value=res.data.data
//     console.log("=====----",details.value)
//   }catch (error){
//     console.error('Error searching:', error);
//   }
// }
//限制字数
const truncateString = (str, maxLength) => {
  if (!str) return "";
  if (str.length <= maxLength) {
    return str;
  } else {
    return str.slice(0, maxLength) + "...";
  }
};
acquiesce('逆袭')
// 在组件加载后执行搜索
onMounted(() => {
  search(); // 页面加载时执行搜索

});
const goToDramaDetail = (dramaId,name) => {
  request.post(`/news/click/${dramaId}`)
  request.post('/news/click/',{
    id: dramaId,
    username: userName
  })
  console.log("---",dramaId);
  // Navigate to the detail page and pass drama ID as route parameter
  router.push({ name: 'VideoStory', params: { id: dramaId ,name: name} });
};

const handleSizeChange =(val)=>{
    pageSize.value=val;
    search();
}
const handleCurrentChange =(val)=>{
  pageNum.value=val;
 search();
}
</script>
<style scoped>
.search-page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: black;
}

.nav-menu {
  display: flex;
  justify-content: center;
  background-color: black;
  border-bottom: none;
}

.nav-menu :deep(.el-menu-item) {
  color: white !important;
}

.nav-menu :deep(.el-menu-item.is-active) {
  color: #ff6600 !important;
}

.search-section {
  padding: 120px 20px 40px;
  background: linear-gradient(to bottom, #000000, #1a1a1a);
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box {
  width: 600px;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
}

.search-box input {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #ff6600;
  background: rgba(255, 255, 255, 0.1);
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-box button {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #ff6600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-box button:hover {
  background: #ff8533;
  transform: scale(1.05);
}

.search-box button img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.search-results {
  padding: 40px 20px;
}

.results-container {
  max-width: 1200px;
  margin: 0 auto;
}

.no-results {
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.drama-card {
  background: white;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.drama-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.drama-content {
  display: flex;
  padding: 20px;
  gap: 30px;
}

.drama-image-wrapper {
  flex-shrink: 0;
  width: 200px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.drama-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.drama-card:hover .drama-image {
  transform: scale(1.05);
}

.drama-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drama-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.drama-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.drama-tag {
  font-size: 14px;
}

.drama-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.pagination-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

:deep(.el-pagination) {
  justify-content: center;
}
</style>
